<template>
  <div class="common-layout">
    <el-container>
      <el-main>
        <div class="main flex">
          <div class="flex-1 ml-4">
            <el-form ref="formRef" :inline="true" :model="form">
              <el-form-item label="问题编号：" prop="No">
                <el-input v-model="form.No" placeholder="请输入问题编号" clearable @keyup.enter="getlist" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" :icon="Search" @click="getlist">搜索</el-button>
                <el-button :icon="Refresh" @click="resetForm">重置</el-button>
              </el-form-item>
            </el-form>

            <div class="common-layout-2">
              <el-container>
                <el-header style="text-align: right" height="80px">
                  <el-row>
                    <el-col :span="12">
                      <h1 class="main-title">问题管理</h1>
                    </el-col>
                    <el-col :span="12">
                      <el-button type="primary" :icon="Plus" @click="showAddDialog">
                        新增问题
                      </el-button>
                    </el-col>
                  </el-row>
                </el-header>
                <el-main>
                  <el-scrollbar :height="isWidth ? '630px' : '419px'">
                    <el-table table-layout="auto" :size="size" :data="datalist" :header-cell-style="{
                      background: '#fafafa',
                      color: '#606266',
                    }" border stripe v-loading="loading" element-loading-background="rgba(255, 255, 255, .5)"
                      element-loading-text="加载中，请稍后..." element-loading-spinner="el-icon-loading"
                      :default-sort="{ prop: 'No', order: 'acending' }">
                      <el-table-column prop="No" align="center" label="题目编号" />
                      <el-table-column prop="Info" align="center" label="题目内容" />
                      <el-table-column prop="OPa" align="center" label="选项A" />
                      <el-table-column prop="AWa" align="center" label="加分" />
                      <el-table-column prop="OPb" align="center" label="选项B" />
                      <el-table-column prop="AWb" align="center" label="加分" />
                      <el-table-column fixed="right" align="center" label="操作" width="180">
                        <template #default="scope">
                          <el-button class="reset-margin" link type="primary" :size="size"
                            @click="showModDialog(scope.row.No, scope.row.Info, scope.row.OPa, scope.row.AWa, scope.row.OPb, scope.row.AWb)">
                            修改
                          </el-button>
                          <el-button class="reset-margin" link type="primary" :size="size"
                            @click="delCollege(scope.row.No)">
                            删除
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-scrollbar>
                </el-main>
              </el-container>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
  <el-dialog title="添加题目" v-model="addDialog" width="20%">
    <el-form :model="addForm" :rules="FormRules" label-width="100px">
      <el-form-item label="题目编号" prop="No">
        <el-input v-model="addForm.No" placeholder="单个数字输入形如‘01’"></el-input>
      </el-form-item>
      <el-form-item label="题目内容" prop="Info">
        <el-input v-model="addForm.Info"></el-input>
      </el-form-item>
      <el-form-item label="选项A" prop="A">
        <el-input v-model="addForm.A"></el-input>
        <el-select v-model="addForm.a" class="m-2" placeholder="选项A加分项">
          <el-option v-for="item in pluslist" :key="item.No" :label="item.No" :value="item.No" />
        </el-select>
      </el-form-item>
      <el-form-item label="选项B" prop="B">
        <el-input v-model="addForm.B"></el-input>
        <el-select v-model="addForm.b" class="m-2" placeholder="选项B加分项">
          <el-option v-for="item in pluslist" :key="item.No" :label="item.No" :value="item.No" />
        </el-select>
      </el-form-item>
    </el-form>
    <span class="dialog-footer" style="margin-left: 38%;">
      <el-button type="primary" @click="addCollege()">确 定</el-button>
      <el-button @click="addDialog = false">取 消</el-button>
    </span>
  </el-dialog>
  <el-dialog title="修改学院" v-model="modDialog" width="20%">
    <el-row>注：不更改则默认为原值</el-row><br>
    <el-form-item label="题目编号" prop="No">
      <el-input v-model="modForm.No" :placeholder="preNo"></el-input>
    </el-form-item>
    <el-form-item label="题目内容" prop="Info">
      <el-input v-model="modForm.Info" :placeholder="preInfo"></el-input>
    </el-form-item>
    <el-form-item label="选项A" prop="A">
      <el-input v-model="modForm.A" :placeholder="preA"></el-input>
      <el-select v-model="modForm.a" class="m-2" :placeholder="prea">
        <el-option v-for="item in pluslist" :key="item.No" :label="item.No" :value="item.No" />
      </el-select>
    </el-form-item>
    <el-form-item label="选项B" prop="B">
      <el-input v-model="modForm.B" :placeholder="preB"></el-input>
      <el-select v-model="modForm.b" class="m-2" :placeholder="preb">
        <el-option v-for="item in pluslist" :key="item.No" :label="item.No" :value="item.No" />
      </el-select>
    </el-form-item>
    <span class="dialog-footer" style="margin-left: 38%;">
      <el-button type="primary" @click="modCollege()">确 定</el-button>
      <el-button @click="modDialog = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { Refresh, Search, Plus } from "@element-plus/icons-vue";
export default {
  data() {
    return {
      form: {
        No: "",
      },
      addForm: {
        No: "",
        Info: "",
        A: "",
        B: "",
        a: "",
        b: "",
      },
      modForm: {
        No: "",
        Info: "",
        A: "",
        B: "",
        a: "",
        b: "",
      },
      FormRules: {
        No: [
          {
            required: true,
            message: "请输入题目编号",
            trigger: "blur",
          },
        ],
        Info: [
          {
            required: true,
            message: "请输入题目内容",
            trigger: "blur",
          },
        ],
        A: [
          {
            required: true,
            message: "请输入选项A",
            trigger: "blur",
          },
        ],
        a: [
          {
            required: true,
            message: "请输入选项A加分项",
            trigger: "blur",
          },
        ],
        B: [
          {
            required: true,
            message: "请输入选项B",
            trigger: "blur",
          },
        ],
        b: [
          {
            required: true,
            message: "请输入选项B加分项",
            trigger: "blur",
          },
        ],
      },
      preNo: "",
      preInfo: "",
      preA: "",
      preB: "",
      prea: "",
      preb: "",
      datalist: [],
      pluslist: [{ No: "E" }, { No: "I" }, { No: "S" }, { No: "N" }, { No: "T" }, { No: "F" }, { No: "J" }, { No: "P" }],
      Search,
      Refresh,
      Plus,
      loading: true,
      addDialog: false,
      modDialog: false,
      screenWidth: document.body.clientWidth,
      isWidth: false
    };
  },
  mounted() {
    this.setClient();
    this.getall();
  },
  methods: {
    async getlist() {
      this.loading = true;
      this.datalist = [];
      const { data: res } = await this.$http.post(
        "api/query/questionNo",
        this.form
      );
      if (res.Data["res"][0].Code === 200) {
        this.datalist = res.Data["res"];
      }
      this.loading = false;
    },
    async getall() {
      this.loading = true;
      this.datalist = [];
      const { data: res } = await this.$http.post("api/query/questionAll");
      this.datalist = res.Data["ret"];
      this.loading = false;
    },
    resetForm() {
      this.form.No = "";
      this.getall();
    },
    async delCollege(No) {
      const confirmResult = await this.$confirm(
        "将永久删除该题目, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult != "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await this.$http.post("api/delete/question", {
        No: No,
      });
      if (res.Data["res"][0].Code != 200) {
        return this.$message.error("删除失败 T.T");
      } else {
        this.$message.success("删除成功");
        this.getall();
      }
    },
    showAddDialog() {
      this.addForm = {};
      this.addDialog = true;
    },
    async addCollege() {
      const { data: res } = await this.$http.post("api/query/questionNo", this.addForm)
      if (res.Data["res"][0].Code == 200) {
        return this.$message.error("添加失败 T.T 编号被别的题目占用了");
      } else {
        const { data: res } = await this.$http.post("api/insert/question", this.addForm)
        if (res.Data["res"][0].Code == 200) {
          this.getall();
          this.addDialog = false
          this.$message.success("增加成功");
        }
      }
    },
    showModDialog(No, Info, A, a, B, b) {
      this.modForm.No = "";
      this.modForm.Info = "";
      this.modForm.A = "";
      this.modForm.a = "";
      this.modForm.B = "";
      this.modForm.b = "";
      this.preNo = No;
      this.preInfo = Info;
      this.preA = A;
      this.prea = a;
      this.preB = B;
      this.preb = b;
      this.modDialog = true;
    },
    async modCollege() {
      if (this.modForm.No == "") this.modForm.No = this.preNo
      if (this.modForm.Info == "") this.modForm.Info = this.preInfo
      if (this.modForm.A == "") this.modForm.A = this.preA
      if (this.modForm.a == "") this.modForm.a = this.prea
      if (this.modForm.B == "") this.modForm.B = this.preB
      if (this.modForm.b == "") this.modForm.b = this.preb
      const { data: res } = await this.$http.post("api/query/questionNo", this.modForm)
      if (res.Data["res"][0].Code == 200) {
        if (res.Data["res"][0].No != this.modForm.No) {
          return this.$message.error("修改失败 T.T 这个编号正在被使用");
        }
      }
      const { data: ret } = await this.$http.post("api/update/question", this.modForm)
      if (ret.Data["res"][0].Code == 200) {
        this.getall();
        this.modDialog = false
        this.$message.success("修改成功");
      } else {
        return this.$message.error("修改失败 T.T");
      }

    },
    setClient() {
      this.screenWidth = document.body.offsetWidth
      console.log(this.screenWidth)
      if (this.screenWidth < 1550) {
        this.isWidth = false
      } else {
        this.isWidth = true
      }
    }
  },
};
</script>

<style lang="less" scoped>
.main-title {
  text-align: left;
  color: rgb(0, 0, 0);
  font-size: 25px;
}

.common-layout-1 {
  background-color: rgb(255, 255, 255);
  margin: 20px;
}

.common-layout-2 {
  background-color: rgb(255, 255, 255);
}

.common-layout-2 .el-header {
  position: relative;
  color: var(--el-text-color-primary);
}

.common-layout-2 .el-col {
  margin: auto;
  position: relative;
  color: var(--el-text-color-primary);
}
</style>
